<script setup lang="ts">
import { localCache } from '@/utils/cache'
import { ref, watch } from 'vue'
import PaneAccount from './c-cpns/pane-account.vue'
import PanePhone from './c-cpns/pane-phone.vue'

const activeName = ref('account')
const isRemPwd = ref<boolean>(localCache.getCache('isRemPwd') ?? false)
watch(isRemPwd, (newValue) => {
  localCache.setCache('isRemPwd', newValue)
})
const accountRef = ref<InstanceType<typeof PaneAccount>>()

function handleLoginBtnClick() {
  if (activeName.value === 'account') {
    accountRef.value?.loginAction(isRemPwd.value)
  } else {
    console.log('用户在进行手机登录')
  }
}
</script>

<template>
  <div class="login">
    <div class="login-panel">
      <h1 class="title">陈皮后台管理系统</h1>

      <!-- 中间的tabs切换 -->
      <div class="tabs">
        <el-tabs type="border-card" stretch v-model="activeName">
          <!-- 1.账号登录的Pane -->
          <el-tab-pane name="account">
            <template #label>
              <div class="label">
                <el-icon>
                  <UserFilled />
                </el-icon>
                <span class="text">帐号登录</span>
              </div>
            </template>
            <pane-account ref="accountRef" />
          </el-tab-pane>

          <!-- 2.手机登录的Pane -->
          <el-tab-pane name="phone">
            <template #label>
              <div class="label">
                <el-icon>
                  <Iphone />
                </el-icon>
                <span class="text">手机登录</span>
              </div>
            </template>
            <pane-phone />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div style="padding: 5px; color: red; font-size: 14px">账号：admin或者user01 密码随意</div>
      <!-- 底部区域 -->
      <div class="controls">
        <el-checkbox v-model="isRemPwd" label="记住密码" size="large" />
        <el-link type="primary">忘记密码</el-link>
      </div>
      <el-button class="login-btn" type="primary" size="large" @click="handleLoginBtnClick">
        立即登录
      </el-button>
    </div>
  </div>
</template>

<style lang="less" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/imgs/login-bg.svg');
  .login-panel {
    width: 330px;
    margin-bottom: 150px;

    .title {
      text-align: center;
      margin-bottom: 15px;
    }

    .label {
      display: flex;
      align-items: center;
      justify-content: center;

      .text {
        margin-left: 5px;
      }
    }

    .controls {
      margin-top: 12px;
      display: flex;

      justify-content: space-between;
    }

    .login-btn {
      margin-top: 10px;
      width: 100%;
      // --el-button-size: 50px;
    }
  }
}
</style>
